import { LockTwoTone, UserOutlined } from "@ant-design/icons";
import React, { useState, useEffect } from "react";
import ProForm, {
  LoginForm,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from "@ant-design/pro-form";
import { useIntl, history, useModel } from "umi";
import styles from "./index.less";
import UserLayout from "./layout";
import { doFetch } from "@/utils/doFetch";
import { useRequest } from 'ahooks';



const Login = (props) => {
  const { userLogin, submitting } = props;
  const intl = useIntl();
  const { initialState, setInitialState } = useModel("@@initialState");

  let { run, loading } = useRequest(doFetch, {
    debounceWait: 300, //防抖
    manual: true,
    formatResult: (res) => res,
    onSuccess: (result, params) => {
      if (result.code == 0) {

        let res = {
          token:result?.data?.token ?? '',
          name:"user",
          userId:result?.data?.userId ?? ''
        }
        setInitialState((s) => ({ ...s, currentUser: res }));
        localStorage.setItem("curuser",JSON.stringify(res))
        history.replace("/");
      }
    },
  });
  //提交
  const handleSubmit = (values) => {
    const { dispatch } = props;
    const postdata = {
      accountName: values.userName,
      password: values.password,
    };
    run({ url: "/userAccount/login", params: postdata });
  };

  return (
    <UserLayout>
      <div className={styles.main} id="mains">
        <div className={styles.head}>
          <h2 style={{ margin: 0, color: "#fff", textShadow: "0px 0px 4px #999" }}>铝模板视觉测量系统</h2>
        </div>
        <div className={styles.body}>
          <LoginForm
            submitter={{
              searchConfig: {
                submitText: "登录",
              },
              render: (_, dom) => dom.pop(),
              submitButtonProps: {
                loading: loading,
                size: "large",
                style: {
                  width: "100%",
                },
              },
            }}
            onFinish={(values) => {
              handleSubmit(values);
            }}
          >
            <ProFormText
              name="userName"
              fieldProps={{
                size: "large",
                prefix: (
                  <UserOutlined className={styles.prefixIcon} />
                ),
              }}
              placeholder={"用户名"}
              rules={[
                {
                  required: true,
                  message: "请输入用户名!",
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: "large",
                prefix: <LockTwoTone className={styles.prefixIcon} />,
              }}
              placeholder={"密码"}
              rules={[
                {
                  required: true,
                  message: "请输入密码！",
                },
              ]}
            />
            <div
              style={{
                marginBottom: 24,
              }}
            >
              <ProFormCheckbox noStyle name="autoLogin">
                <span
                  style={{ color: "#fff" }}
                >
                  自动登录</span>
              </ProFormCheckbox>
              {/* <Link to="/user/fogot"
              style={{
                float: 'right',
              }}
            >
              <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
            </Link> */}
            </div>
          </LoginForm>
        </div>
      </div>
    </UserLayout>
  );
};

export default Login;
